<template>
	<view class="content">
		<!-- 模板部分无语法错误，保持不变 -->
		<view class="top-box">
			<view class="head-bg">
				<view class="head-box">
					<image src="../../static/images/userWa.png" class="bg-wa"></image>
					<view style="height: 160rpx;"></view>
					<view class="company-box">
						<image src="../../static/images/user.png" class="head-img"></image>
						<view style="width: calc(100% - 140rpx);">
							<view class="title-box">
								<view class="comName">{{companyName}}</view>
								<view style="display: flex;align-items: center;z-index: 20;">
									<view class="change" @click="switchCom">切换</view>
									<image src="../../static/images/change.png" @click="switchCom">
									</image>
								</view>
							</view>
							<view style="display: flex;	margin-top: 10rpx;" v-if="companyInfo">
								<view class="renzheng">
									<image src="../../static/images/save.png"></image>
									<view>已认证</view>
								</view>
								<view class="scale">
									<image src="../../static/images/company-small.png"></image>
									<view>{{ scale }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="contract-box">
						<view class="now-contract">
							当前合同
							<view class="triangle-left"></view>
						</view>
						<view class="info-box">
							<view class="info-top">
								<view style="display: flex;font-size: 28rpx;font-weight: 700;align-items: center;">
									<image src="../../static/images/contract-ash.png" class="contract-img"
										v-if="contractInfo.status == 0"></image>
									<image src="../../static/images/contract-green.png" class="contract-img"
										v-if="contractInfo.status == 1"></image>
									<image src="../../static/images/contract-red.png" class="contract-img"
										v-if="contractInfo.status == 2"></image>
									<view
										:class="contractInfo.status == 0? 'ash' : contractInfo.status == 1? 'green' : 'red'">
										{{ contractInfo.status == 0? '未生效' : contractInfo.status == 1? '正常' : '过期' }}
									</view>
									<view class="time" v-if="contractInfo.beginTime">{{ contractInfo.beginTime }} 至
										{{ contractInfo.endTime }}
									</view>
								</view>
								<view class="contract-btn" @click="toContract()">
									<view>
										{{ contractInfo.status == 0? '查看合同' : contractInfo.status == 1? '合同管理' : '续签合同' }}
									</view>
									<image src="../../static/images/stamp2.png"></image>
								</view>
							</view>
							<view class="progress-box" v-if="contractInfo.status != 2">
								<view class="progress">
									<view class="progress-white" :style="progressWigth"
										v-if="contractInfo.status == 1 || contractInfo.status == 0">
										<view class="round"></view>
										<view class="triangle-left"></view>
										<view class="time-box">{{ $u.timeFormat(nowTime, 'yyyy-mm-dd') }}</view>
									</view>
								</view>
							</view>
							<view class="contract-msg" v-if="!contractInfo.id">当前无合同，请前往签署</view>
							<view class="contract-msg" v-if="contractInfo.id && contractInfo.status == 0">
								合同未生效，生效时间：{{ contractInfo.beginTime }}</view>
							<view class="contract-msg" v-if="contractInfo.id && contractInfo.status == 1">距到期还有:
								{{ differentDay }}天
							</view>
							<view class="contract-msg" v-if="contractInfo.id && contractInfo.status == 2">该合同已到期，请及时续签
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="moudle-box">
				<view class="moudle-item">
					<image src="../../static/images/userImg-two.png"
						style="width: 58rpx;height: 52rpx;margin-bottom: 8rpx;"></image>
					<view>手机开票</view>
				</view>
				<view class="moudle-item">
					<image src="../../static/images/userImg-four.png"
						style="width: 60rpx;height: 44rpx;margin-bottom: 16rpx;"></image>
					<view>执照信息</view>
				</view>
				<view class="moudle-item" @click="toPage('/pageNew/ContractManage/ContractManage')">
					<image src="../../static/images/contract-red.png"
						style="width: 64rpx;height: 54rpx;border-radius: 20rpx;padding: 8rpx 4rpx; margin-bottom: 6rpx;">
					</image>
					<view>我的合同</view>
				</view>
				<view class="moudle-item">
					<image src="../../static/images/userImg-one.png"
						style="width: 64rpx;height: 54rpx;margin-bottom: 6rpx;"></image>
					<view>一键转移公司</view>
				</view>
				<view class="moudle-item" @click="toCalculator()">
					<image src="../../static/images/userImg-three.png"
						style="width: 52rpx;height: 54rpx;margin-bottom: 6rpx;">
					</image>
					<view>税费计算器</view>
				</view>
			</view>
		</view>

		<view class="more-box">
			<view class="more-item" @click="toCompany()">
				<view style="display: flex;align-items: center;">
					<image src="../../static/images/com.png" style="width: 36rpx;height: 34rpx;"></image>
					<view>公司管理</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
			<view class="more-item" style="margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<image src="../../static/images/help.png" style="width: 36rpx;height: 34rpx;"></image>
					<view>帮助中心</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
			<view class="more-item" style="margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<image src="../../static/images/empower.png" style="width: 44rpx;height: 44rpx;margin-left: -8rpx;">
					</image>
					<view>授权管理</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
			<view class="more-item" style="margin-top: 30rpx;" @click="toPage('/pageNew/setup/setup')">
				<view style="display: flex;align-items: center;">
					<image src="../../static/images/setup.png" style="width: 36rpx;height: 36rpx;">
					</image>
					<view>设置</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
			<view class="more-item" style="margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<image src="../../static/images/share.png" style="width: 44rpx;height: 44rpx;margin-left: -4rpx;">
					</image>
					<view>分享</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
			<view class="more-item" style="margin-top: 30rpx;" @click="showLogoutConfirm">
				<view style="display: flex;align-items: center;">
					<u-icon name="close-circle" color="#81b0f4" size="22"></u-icon>
					<view style="margin-left: 24rpx;">退出登录</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
		</view>
		<u-modal :show="showLogoutModal" :title="'提示'" confirmColor="#dd0000" :showCancelButton='true'
			content="是否确认退出登录？" @confirm="logout" @cancel="showLogoutModal = false">
		</u-modal>
	</view>
</template>

<script>
	import {
		getContractApi,
		currentApi,
		wxlogoutApi
	} from "@/api/auth.js"
	export default {
		data() {
			return {
				src: '',
				msgType: 'success',
				companyName: '',
				companyInfo: '',
				contractInfo: {
					id: '',
					status: 0,
					beginTime: '',
					endTime: ''
				},
				scaleList: [{
						value: '0',
						label: '个人独资'
					},
					{
						value: '1',
						label: '小规模公司'
					},
					{
						value: '2',
						label: '一般纳税人公司'
					},
					{
						value: '3',
						label: '个体工商户'
					},
					{
						value: '4',
						label: '其他企业'
					},
				],
				scale: '',
				constractDay: 0,
				nowTime: new Date(),
				differentDay: 0,
				progressWigth: '',
				showLogoutModal: false
			}
		},
		onShow() {
			this.companyInfo = uni.getStorageSync('companyInfo')
			if (this.companyInfo) {
				this.companyName = this.companyInfo.companyName
				const type = this.scaleList.find(item => this.companyInfo.scale == item.value)
				this.scale = type ? type.label : '暂无';
			} else {
				this.companyName = '暂无绑定公司'
			}
			this.classification()
		},
		methods: {
			toPage(url) {
				console.log(url);
				uni.navigateTo({
					url: url
				})
			},
			showLogoutConfirm() {
				console.log("点击了退出登录");
				this.showLogoutModal = true;
			},
			async logout() {
				try {
					await wxlogoutApi();
					uni.removeStorageSync('companyInfo');
					uni.removeStorageSync('isLogin');
					uni.removeStorageSync('token');
					uni.removeStorageSync('userInfo');
					this.showLogoutModal = false;
					uni.reLaunch({
						url: '/pages/login/login'
					});
					uni.showToast({
						title: '退出成功',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: '退出失败，请重试',
						icon: 'error'
					});
				}
			},
			switchCom() {
				uni.navigateTo({
					url: '/pages/company/company'
				})
			},
			toCalculator() {
				uni.navigateTo({
					url: '/subpackageTwo/pages/calculator/calculator'
				})
			},
			toCompany() {
				uni.navigateTo({
					url: '/pages/company/company'
				})
			},
			toContract() {
				uni.navigateTo({
					url: '/pages/contract/contract'
				})
			},
			async classification() {
				if (this.companyInfo) {
					try {
						const res = await currentApi(this.companyInfo.id);
						console.log("合同接口返回数据：", res);
						if (res.code == 200) {
							if (res.data && res.data.id) {
								const endTime = new Date(res.data.endTime);
								const now = new Date();
								this.contractInfo = {
									...res.data,
									status: now > endTime ? 2 : res.data.status
								};
								if (this.contractInfo.status == 1 || this.contractInfo.status == 0) {
									this.constractTime();
								}
							} else {
								this.contractInfo = {
									id: '',
									status: 0,
									endTime: '- -',
									declareType: 2
								};
							}
						} else {
							this.contractInfo = {
								id: '',
								status: 0,
								endTime: '- -',
								declareType: 2
							};
							uni.showToast({
								title: '获取合同失败',
								icon: 'error'
							});
						}
					} catch (error) {
						console.error("获取合同异常：", error);
						this.contractInfo = {
							id: '',
							status: 0,
							endTime: '- -',
							declareType: 2
						};
						uni.showToast({
							title: '获取合同异常',
							icon: 'error'
						});
					}
				} else {
					this.contractInfo = {
						id: '',
						status: 0,
						endTime: '- -',
						declareType: 2
					};
				}
			},

			// 核心修正：重命名中文变量 + 增加日期容错
			constractTime() {
				try {
					// 1. 校验日期合法性，避免空值/无效值
					if (!this.contractInfo.beginTime || !this.contractInfo.endTime) {
						this.progressWigth = 'width: 0% !important;';
						this.differentDay = 0;
						return;
					}

					const start = new Date(this.contractInfo.beginTime);
					const end = new Date(this.contractInfo.endTime);
					const now = new Date();

					// 2. 校验Date对象有效性（避免Invalid Date）
					if (isNaN(start.getTime()) || isNaN(end.getTime())) {
						this.progressWigth = 'width: 0% !important;';
						this.differentDay = 0;
						return;
					}

					// 3. 计算合同总天数（避免除以0）
					const difference = end - start;
					const oneDay = 1000 * 60 * 60 * 24;
					this.constractDay = Math.max(1, Math.round(difference / oneDay));

					// 4. 修正变量名：中文→英文
					if (this.contractInfo.status === 0) {
						// 未生效：计算距离生效剩余天数
						const effectiveRemaining = start - now;
						this.differentDay = Math.max(0, Math.round(effectiveRemaining / oneDay));
					} else {
						// 正常：计算距离到期剩余天数
						const expireRemaining = end - now;
						this.differentDay = Math.max(0, Math.round(expireRemaining / oneDay));
					}

					// 5. 计算已过天数 & 进度条宽度
					const passedDays = Math.round((now - start) / oneDay);
					const width = Math.min(100, Math.max(0, (passedDays / this.constractDay) * 100));
					this.progressWigth = `width: ${width.toFixed(2)}% !important;`;
				} catch (error) {
					console.error("计算合同时间异常：", error);
					this.progressWigth = 'width: 0% !important;';
					this.differentDay = 0; // 异常时重置剩余天数
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 样式部分无错误，保持不变
	.content {
		.top-box {
			width: calc(100% + 60rpx);
			height: 730rpx;
			background: #fff;
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			margin-left: -30rpx;
			position: relative;

			.head-bg {
				width: calc(100% + 800rpx);
				height: 570rpx;
				background: linear-gradient(90deg, rgba(163, 218, 247, 0.6) 0%, rgba(184, 211, 255, 0.6) 100%);
				box-shadow: 0rpx 4rpx 10rpx 2rpx rgba(11, 66, 150, 0.15);
				border-radius: 0 0 50% 50%;
				margin-left: -400rpx;
				position: relative;
				display: flex;
				justify-content: center;
				overflow: hidden;

				.head-box {
					width: calc(100% - 860rpx);
					height: 570rpx;
					position: relative;
					z-index: 10;
					padding: 0 30rpx;

					.bg-wa {
						width: 954rpx;
						height: 954rpx;
						position: absolute;
						left: -50rpx;
						top: -122rpx;
						z-index: 2;
					}

					.company-box {
						margin: 0rpx 20rpx;
						height: 140rpx;
						display: flex;
						align-items: center;
						z-index: 100;

						.head-img {
							width: 140rpx;
							height: 140rpx;
							margin-right: 26rpx;
						}

						.title-box {
							display: flex;
							justify-content: space-between;

							image {
								width: 28rpx;
								height: 28rpx;
							}

							.comName {
								width: calc(100% - 110rpx);
								font-size: 30rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.change {
								font-size: 28rpx;
								text-decoration-line: underline;
								color: rgba(65, 136, 239, 1);
								margin: 0rpx 8rpx;
							}
						}

						.renzheng {
							width: 108rpx;
							height: 34rpx;
							border-radius: 18rpx;
							font-size: 18rpx;
							color: #fff;
							background: linear-gradient(217.08deg, rgba(65, 136, 239, 1) 0%, rgba(128, 199, 237, 1) 100%);
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 4rpx;
							}
						}

						.scale {
							width: auto;
							height: 36rpx;
							padding: 0 20rpx;
							border-radius: 16rpx;
							background: rgba(255, 255, 255, 0.9);
							font-size: 18rpx;
							line-height: 32rpx;
							margin-left: 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 4rpx;
							}
						}
					}

					.contract-box {
						margin: 20rpx;
						height: 240rpx;
						border-radius: 16rpx;
						background: linear-gradient(135deg, rgba(41, 48, 64, 1) 0%, rgba(50, 63, 102, 1) 100%), rgba(255, 255, 255, 1);
						margin-top: 46rpx;
						z-index: 100;
						position: relative;

						.now-contract {
							width: 120rpx;
							height: 32rpx;
							line-height: 32rpx;
							border-radius: 4rpx 4rpx 4rpx 0rpx;
							background: linear-gradient(106.05deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 141, 26, 1);
							box-shadow: 2rpx 2rpx 3rpx rgba(0, 0, 0, 0.15);
							margin-left: -6rpx;
							font-size: 18rpx;
							text-align: center;
							color: #fff;
							position: relative;

							.triangle-left {
								width: 0;
								height: 0;
								border-right: 6rpx solid rgba(187, 42, 57, 1);
								border-bottom: 6rpx solid transparent;
								position: absolute;
								left: 0;
								bottom: -6rpx;
							}
						}

						.info-box {
							width: calc(100% - 100rpx);
							padding: 0 50rpx;
							margin-top: 10rpx;

							.info-top {
								width: calc(100% + 50rpx);
								display: flex;
								justify-content: space-between;
								align-items: center;

								.contract-img {
									width: 46rpx;
									height: 46rpx;
								}

								.green {
									color: rgba(13, 168, 75, 1);
									margin-left: 6rpx;
								}

								.red {
									color: rgba(212, 48, 48, 1);
									margin-left: 6rpx;
								}

								.ash {
									color: rgba(205, 205, 205, 1);
									margin-left: 6rpx;
								}

								.time {
									font-size: 22rpx;
									font-weight: 400;
									color: #fff;
									margin-left: 20rpx;
								}

								.contract-btn {
									width: 164rpx;
									height: 50rpx;
									border-radius: 26rpx 0 0 26rpx;
									background: linear-gradient(127.68deg, rgba(249, 226, 199, 1) 0%, rgba(240, 202, 164, 1) 100%);
									box-shadow: inset 0rpx -2rpx 4rpx rgba(245, 249, 252, 0.4), inset 0rpx 2rpx 4rpx rgba(255, 255, 255, 0.5), 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.25);
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 22rpx;
									letter-spacing: 2rpx;
									z-index: 20;

									image {
										width: 26rpx;
										height: 26rpx;
										margin: 0 -12rpx 0 4rpx;
									}
								}
							}

							.progress-box {
								width: 100%;
								height: 66rpx;
								position: relative;

								.progress {
									width: 100%;
									height: 8rpx;
									border-radius: 4rpx;
									background: rgba(136, 163, 181, 1);
									box-shadow: inset 1rpx -1rpx 2rpx rgba(0, 0, 0, 0.25), inset 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.25);
									position: absolute;
									bottom: 0;

									.progress-white {
										width: 0;
										height: 100%;
										border-radius: 4rpx;
										background: rgba(245, 249, 252, 1);
										position: relative;

										.round {
											width: 12rpx;
											height: 12rpx;
											border-radius: 50%;
											background: rgba(245, 249, 252, 1);
											position: absolute;
											right: 0;
											top: -2rpx;
										}

										.triangle-left {
											width: 0;
											height: 0;
											border-right: 6rpx solid transparent;
											border-top: 6rpx solid rgba(245, 249, 252, 1);
											border-left: 6rpx solid transparent;
											position: absolute;
											right: 0;
											top: -16rpx;
										}

										.time-box {
											width: 130rpx;
											height: 32rpx;
											line-height: 32rpx;
											border-radius: 4rpx;
											background: rgba(245, 249, 252, 1);
											position: absolute;
											right: -66rpx;
											top: -48rpx;
											color: rgba(50, 63, 102, 1);
											font-size: 20rpx;
											text-align: center;
										}
									}
								}
							}

							.contract-msg {
								font-size: 22rpx;
								color: #fff;
								text-align: center;
								margin-top: 10rpx;
							}
						}
					}
				}
			}

			.moudle-box {
				width: calc(100% - 80rpx);
				height: 130rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
				position: absolute;
				bottom: 10rpx;
				font-size: 24rpx;
				color: rgba(34, 34, 34, 1);

				.moudle-item {
					width: 25%;
					text-align: center;
				}
			}
		}

		.more-box {
			width: calc(100% - 68rpx);
			height: auto;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			margin: 20rpx;
			padding: 46rpx 34rpx;

			.more-item {
				width: 100%;
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;

				image {
					margin-right: 24rpx;
				}
			}
		}
	}
</style>